<template>
  <div class="open-vip">
    <div class="open-head">
      <easy-head :headName="headName" :returnUrl="returnUrl"></easy-head>
    </div>
    <div class="open-center">
      <div class="vip-class" style="background-color: #ffe5a0">
        <div><span>1个月VIP&nbsp;&nbsp;&nbsp;&nbsp;9.9元</span><span>享受15元跑腿费，到期清零</span></div>
        <div>
          <button type="button" class="layui-btn">购买</button>
        </div>
      </div>
      <div class="vip-class">
        <div><span>季度VIP&nbsp;&nbsp;&nbsp;&nbsp;37.8元</span><span>享受65元跑腿费，到期清零</span></div>
        <div>
          <button type="button" class="layui-btn">购买</button>
        </div>
      </div>

      <div class="vip-class" style="background-color: #ff4617">
        <div><span>年度VIP&nbsp;&nbsp;&nbsp;&nbsp;108元</span><span>享受190元跑腿费，到期清零</span></div>
        <div>
          <button type="button" class="layui-btn">购买</button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import easyHead from "../easyHead/easyHead"

  export default {
    name: "openvip",
    data() {
      return {
        returnUrl: "/index",
        headName: "开通VIP",

      }
    },

    components: {
      easyHead
    },
  }
</script>

<style scoped>
  .vip-class > :last-child {
    width: 10%;
    position: relative;
    left: 80%;
    bottom: 70%;
    height: 0.85rem;
    line-height: 0.85rem;

    text-align: right;
  }

  .vip-class > :first-child > :last-child {
    color: #b6b6b6;
  }

  .vip-class > :first-child > span {
    width: 100%;
    float: left;
    line-height: 0.75rem;
  }

  .vip-class {
    margin-top: 0.2rem;
    width: 100%;
    height: 1.5rem;
    background-color: #ffec57;
    font-weight: bold;
    font-size: 0.5rem;

  }

</style>
